{% extends "AUTH/navbar.html" %}
{% load staticfiles %}
{% load pagination_tags %}
{% block title %}
    <title>应用部署</title>
    <style>
        textarea {
            white-space: pre;
            font-family: Courier, monospace;
            width:100%;
            height:540px;
            background-color: black;
            color: #ffffff;
        }
    </style>
{% endblock %}
{% block content %}
    <div class="container">
        <h2>
            应用部署
            <small class="text-danger">{{ salt_server.idc.name }} -- {{ salt_server.url }} -- {{ salt_server.role }}</small>
{#            Server选择#}
            <div class="btn-group pull-right">
                <a href="{% url 'salt:config' salt_server.id %}" class="btn btn-info" title="配置文件" target="_blank">Config</a>
                <div class="btn-group pull-right dropdown">
                    <a href="#" class="btn btn-info dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        &nbsp;SaltServer&nbsp;<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        {% for s in server_list %}
                            <li><a href="{% url 'salt:file_remote' s.id%}">{{ s.idc.name }} -- {{ s.url }}</a></li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </h2>
        {% if error %}<div class="alert alert-danger"><a href="#" class="close" data-dismiss="alert">&times;</a>{{ error }}</div>{% endif %}
        {% if success %}<div class="alert alert-success"><a href="#" class="close" data-dismiss="alert">&times;</a>{{ success }}</div>{% endif %}
        <div class="row">
            <div class="col-sm-3 col-md-3 col-lg-3">
                <div class="form-group">
                    <label for="tgt">目标主机：</label>
                    <select class="form-control" multiple="multiple" size="4" id="tgt">
                        {% for minion in minion_list %}
                        <option value="{{ minion.minion }}">{{ minion.minion }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label for="env">环境列表：</label>
                    <select class="form-control" id="env">
                        <option >－－选择环境－－</option>
                        {% for env in envs %}
                        <option value="{{ env }}">{{ env }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label for="state">State模块：</label>
                    <div id="state"></div>
                </div>

                <button type="button" id="deploy" class="btn btn-info btn-lg btn-block">Deploy</button>
            </div>
            <div class="col-sm-9 col-md-9 col-lg-9">
                 <label for="result">部署结果：</label>
                <textarea id="result" rows="{{ result|length|add:'1' }}" style="min-height:300px;" readonly="readonly">[root@salt-master ~]#</textarea>

            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
    <script src="{% static 'salt/js/formatJSON.js' %}"></script>
    <script>
        //选择环境显示State
        $('#env').change(function(){
            var env=$(this).val() ;
            $('#state').html('');
            $.getJSON("{% url 'salt:state_fun' salt_server.id %}", {env: env}, function (result) {
                if (typeof result != 'object') { alert(result);}
                else {
                    for (var i = result.length - 1; i >= 0; i--) {
                        var item = '<div class="checkbox">' +
                                '<label><input type="checkbox" name="state" value="' + result[i] + '">' + result[i] + '</label>' +
                                '</div>';
                        $(item).appendTo("#state");
                    }
                }
            });
            return false;
        });
        $('#deploy').click(function(){
            var tgt = $('#tgt').val();
            var env = $('#env').val();
            var state="";
            var rv=document.getElementById('result');
            $("input:checkbox[name='state']:checked").each(function() {
                state += $(this).val() + ",";
            });
            if (!state){alert("请选择State模块！");}
            else if(!tgt){alert("请选择目标主机！");}
            else{
                $.getJSON("{% url 'salt:state_fun' salt_server.id %}", {tgt:tgt.toString(),env:env,state:state}, function (result) {
                    rv.value="[root@salt-master ~]# salt "+tgt+" state.sls "+state.substring(0,state.length-1)+" saltenv="+env;
                    for (var k in result) {
                        var v = result[k];
                        if (typeof v != 'object') {
                            rv.value += "\n" + k + ":" + v;
                        }
                        else {
                            rv.value += "\n" + k + ":" + formatJson(v, true);
                        }
                    }
                });
            }
        });
    </script>
{% endblock %}